

<template>
    <div class="center-center" ref="center2">

    </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from 'vue';
let myChart = null
let center2 = ref(null)
let initOptions = () => {
    myChart = echarts.init(center2.value)
    myChart.setOption({
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ['50%', '85%'],
                radius: '130%',
                min: 0,
                max: 1,
                splitNumber: 8,
                axisLine: {
                    lineStyle: {
                        width: 6,
                        color: [
                            [0.25, '#FF6E76'],
                            [0.5, '#FDDD60'],
                            [0.75, '#58D9F9'],
                            [1, '#7CFFB2']
                        ]
                    }
                },
                // 指针
                pointer: {
                    icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                    length: '12%',
                    width: 20,
                    offsetCenter: [0, '-60%'],
                    itemStyle: {
                        color: 'auto',
                    }
                },
                axisTick: {
                    length: 12,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    }
                },
                splitLine: {
                    length: 20,
                    lineStyle: {
                        color: 'auto',
                        width: 5
                    }
                },
                axisLabel: {
                    // color: 'white',
                    fontSize: 20,
                    distance: -50,
                    rotate: 'tangential',
                    formatter: function (value) {
                        if (value === 0.875) {
                            return '优';
                        } else if (value === 0.625) {
                            return '中';
                        } else if (value === 0.375) {
                            return '良';
                        } else if (value === 0.125) {
                            return '差';
                        }
                        return '';
                    }
                },

                detail: {
                    fontSize: 30,
                    offsetCenter: [0, '-10%'],
                    valueAnimation: true,
                    formatter: function (value) {
                        return Math.round(value * 100) + '分';
                    },
                    color: 'auto'
                },
                data: [
                    {   
                        name: '成绩评定',
                        value: 0.7,
                    }
                ],
                title: {
                    offsetCenter: [0, '-35%'],
                    fontSize: 20,
                    // color:'white'
                },
            }
        ]
    });
}

onMounted(() => {
    initOptions()
})
</script>
<style scoped lang='scss'>
.center-center {
    width: 100%;
    height: 100%;
}
</style>